<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>echo server</title>
  </head>
  <body>
    <input type="button" value="开始" id="begin" /><br />
    <input type="text" id="input" />
    <input type="button" id="add" value="发言" /><br />

    <div id="content"></div>

    <script>
      var proxtHost = "localhost:8000";
      beginBtn = document.getElementById("begin");
      beginBtn.onclick = function () {
        ws = new WebSocket("ws://" + proxtHost + "/echo?a=1");
        ws.onopen = function (ev) {
          ws.send("hello");
        };
        ws.onclose = function (ev) {
          alert("close" + ev);
        };
        ws.onerror = function (ev) {
          alert("error" + ev);
        };
        ws.onmessage = function (ev) {
          var p = document.createElement("p");
          p.innerHTML = ev.data;

          document.getElementById("content").appendChild(p);
        };

        document.getElementById("add").onclick = function () {
          var inputVal = document.getElementById("input").value;
          ws.send(inputVal);
        };
      };
    </script>
  </body>
</html>
